/*
 * @Author: kanglang
 * @Date: 2021-01-12 20:03:16
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-07-20 17:32:27
 * @Description: 刷脸信息录入
 */
import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  SafeAreaView,
  TouchableOpacity,
  NativeModules
} from 'react-native';
import { msg, } from '@/common';
import { px2dp } from '@/styles';
import { uploadImage } from '@/config';
import api from '@/api';
import { iconCamera } from '@/images';
import baseConfig from '@/config/baseConfig';

const { fileUrl } = baseConfig;
export default class FaceInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imgUrl: ''
    };
  }

  componentDidMount() {

  }

  render() {
    const { imgUrl } = this.state;
    return (
      <SafeAreaView style={styles.safeViewStyle}>
        <View style={styles.container}>
          <Text style={styles.titleOne}>请上传自拍照片完成人脸信息录入</Text>
          <Text styles={styles.titleTwo}>录入完成后，您可以刷脸登录缘多新联盟车载设备</Text>

          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.imgBox}
            onPress={this.selectImg}
          >
            {
              imgUrl ?
                <Image style={styles.imged} source={{ uri: fileUrl + imgUrl }} /> :
                <>
                  <Image style={styles.img} source={iconCamera} />
                  <Text style={styles.titleThree}>点击上传人脸信息</Text>
                </>
            }

          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }

  // 选择图片
  selectImg = () => {
    NativeModules.DataModule.chooseImage((path, imageBase64) => {
      this.upload(path);
    });
  }

  // 上传照片
  upload(path) {
    NativeModules.WindowModule.showLoading();
    uploadImage('upload?dirName=driverCer', path)
      .then((res) => {
        console.log('🚀🚀🚀wimi======>>>res', res);
        if (res.success) {
          NativeModules.WindowModule.dismissLoading();
          this.setState({ imgUrl: res.data.localId }, () => {
            this.submitImg();
          });
        } else {
          NativeModules.WindowModule.dismissLoading();
          msg.emit('router: goToNext', {
            routeName: 'UploadFaceResult',
            isSuccess: false,
            result: res.msg
          });
        }
      })
      .catch((err) => {
        NativeModules.WindowModule.dismissLoading();
        msg.emit('router: goToNext', {
          routeName: 'UploadFaceResult',
          isSuccess: false,
          result: err.msg
        });
      });
  }

  // 提交刷脸信息
  submitImg = () => {
    const { imgUrl } = this.state;
    const params = {
      url: imgUrl
    };
    api.supply.addDriverFace(params).then((res) => {
      if (res.success) {
        msg.emit('router: goToNext', {
          routeName: 'UploadFaceResult',
          isSuccess: true
        });
      } else {
        msg.emit('router: goToNext', {
          routeName: 'UploadFaceResult',
          isSuccess: false,
          result: res.msg
        });
      }
    });
  }
}

const styles = StyleSheet.create({
  safeViewStyle: {
    backgroundColor: '#fff',
  },
  container: {
    height: '100%',
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center'
  },
  titleOne: {
    fontSize: px2dp(42),
    color: '#333232',
    marginTop: px2dp(80),
    marginBottom: px2dp(10)
  },
  titleTwo: {
    fontSize: px2dp(28),
    color: '#999796',
  },
  imgBox: {
    width: px2dp(300) * 2,
    height: px2dp(225) * 2,
    backgroundColor: '#F5F5F5',
    borderRadius: px2dp(16),
    marginTop: px2dp(80),
    justifyContent: 'center',
    alignItems: 'center'
  },
  img: {
    width: px2dp(85),
    height: px2dp(85),
    marginBottom: px2dp(24)
  },
  imged: {
    width: '99%',
    height: '99%',
  }
});
